<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>城市选择</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/staticFiles/css/sm/sm.min.css">
    <style type="text/css">
    		ul {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    		}
    		
    		ul .province-title{
    			padding-left: .38rem;
    		}
    		ul li{
    			float: left;
    			width:100%;
    			display: block;
    			padding: 0;
    			padding: 0;
    		}
    		
    		ul.city-ul{
    			margin: 0;
    			width: 100%;
    		}
    		
    		ul.city-ul li{
    			background: #FFF;
    			padding: 0 .38rem;
    			border-bottom: 1px solid #cfcfcf;
    			height: 1.8rem;
    			line-height: 1.8rem;
    		}
    		.search-input{
    			margin: 0;
    			padding:.38rem;
    			background: #999;
    			position: fixed;
    			top: 0;
    			width: 100%;
    			display:inline;
    		}
    		.search-input input{
    			text-align: center;
    		}
    		.search-input .icon-search{
    			background: url('\staticFiles\image\icon\search.png');
    			margin-left:.2rem; 
    		}
    		
    		.search-input .icon-search-left{
    			margin-left:.1rem; 
    		}
    		
    		.search-input input.search-left{
    			text-align: left;
    			padding-left:1rem; 
    		}
    		
    		
    		.search-input .icon-clear{
    			       color: #999;
					    right: .6rem;
					    font-size: .5rem;
					    left: inherit;
					    display: none;
					    border-radius: 1rem;
					    height: 1rem;
					    line-height: 1rem;
					    padding:0;
					    margin:0;
					    width: 1rem;
					    background: #cfcfcf;
					    text-align: center;
    		}
    		
    </style>
    
  </head>
  <body>
    <script type='text/javascript' src='/staticFiles/json/area.json' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/sm/sm.min.js' charset='utf-8'></script>

    <div class="page">
  <div class="content" style="background: #eee;padding-top:2.1rem;overflow-y:visible ">
  	<div class="search-input">
  		<i class="icon icon-search" ></i>
  		<input id="search-input"   placeholder="搜索"/>
  		<a class="icon icon-clear">X</a>
  	</div>
  	
  	<div id="area-list-content">
  	</div>
  	
  	<div id="area-list-search" style="display: none;">
  			<ul class="">
  				<li>
  					<a>北京市</a>
  					<ul >
  						<li>北京市</li>
  					</ul>
  				</li>
  			</ul>
  	</div>
  	
  </div>
</div>

<script type="text/javascript">
	 function selectCity(name){
		alert('this is city is :' + name);
	}

	$(function(){
		var width = $('#search-input').offset().width;
		var searchWidth = $('.icon-search').offset().width;
		//alert(searchWidth );
		//$('.icon-search').css('margin-left',width/2-searchWidth*3);
		var initCityList = function(){
			$('#area-list-search').css('display','none');
			$('#area-list-content').css('display','block');
			
			var listHtml = '';
			listHtml += '<ul>'
			for(var key in area){
				var ps = area[key];
				listHtml += '<li>'
				listHtml += '<a class="province-title">' + ps.provinceName  + '</a>';
				listHtml += '<ul class="city-ul">';
				for(var k2 in ps.citys){
					var city = ps.citys[k2];
					listHtml += '<li onclick=selectCity(\''+ city.cityName+'\')>' +city.cityName+ '</li>';
				}
				listHtml += '</ul>';
				listHtml += '</li>'
			}
			listHtml += '</ul>'
			
			$('#area-list-content').html(listHtml);
			
		}
		initCityList();
		
		var showCityList = function(){
			$('#area-list-search').css('display','none');
			$('#area-list-content').css('display','block');
			
		};
		
		var showSearch = function(){
			$('#area-list-search').css('display','block');
			$('#area-list-content').css('display','none');
			$('#area-list-search').html('');
		};
		
		//执行查询
		var doSearch = function(value){
			if(value == '') {
				$('#area-list-search').html('');
				return ;
			}
			var listHtml 	= '<ul class="city-ul">'
			for(var key in area){
				var ps = area[key];
				for(var k2 in ps.citys){
					var city = ps.citys[k2];
					if(city.cityName && city.cityName.indexOf(value) > -1){
						listHtml += '<li onclick=selectCity(\''+ city.cityName+'\')>' +city.cityName+ '</li>';
					}
				}
			}
			listHtml += '</ul>';
			$('#area-list-search').html(listHtml);
		};
		
		
		$('#search-input').click(function(){
			$(this).addClass('search-left');
			$('.icon-clear').css('display','block');
			showSearch();
		}).blur(function(){
			if(this.value == ''){
				$('.icon-clear').css('display','none');
				$(this).removeClass('search-left');
				showCityList();
			}
		}).keyup(function(e){
			clearTimeout(timeout);
			var me = this;
			var timeout = setTimeout(function(){
				doSearch(me.value);
			},500);
		});
		
		$('.icon-clear').click(function(){
			$('#search-input').val('');
			$(this).css('display','none');
			$('#search-input').removeClass('search-left');
			showCityList();
		});
	});
</script>
  </body>
</html>